//模拟考试数据统计分析


import React from 'react';
import { Layout, Row, Col, Card, Statistic, Table, Select} from 'antd';
import { useState } from 'react';
import { getMockExamDataAPI } from '@/api/admin/dataStatistics';
const {Option} =Select

const { Header, Content } = Layout;

const data = [
  {
    mockExaminationId: '1',
    mockStudentName: '张三',
    mockExaminationScore: 90,
    passed: true,
  },
  {
    mockExaminationId: '2',
    mockStudentName: '李四',
    mockExaminationScore: 80,
    passed: true,
  },
  {
    mockExaminationId: '3',
    mockStudentName: '王五',
    mockExaminationScore: 60,
    passed: false,
  },
  {
    mockExaminationId: '4',
    mockStudentName: '周六',
    mockExaminationScore: 80,
    passed: true,
  }
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'mockStudentName',
    key: 'mockStudentName',
  },
  {
    title: '分数',
    dataIndex: 'mockExaminationScore',
    key: 'mockExaminationScore',
  },
  {
    title: '是否通过',
    dataIndex: 'passed',
    key: 'passed',
    render: passed => (
      <span>{passed ? '是' : '否'}</span>
    ),
  },
];

const MockExam = () => {
  const subjectList=[
    {
      key:'s2',
      label:"科目二"
    },
    {
      key:'s3',
      label:"科目三"
    }
  ]
  const [subject,setSubject] = useState('')
  const [examData,setExamData]=useState([])
    const onSelectSubject = async(values) =>{
      console.log(values)
     setSubject(values)
     const res= await getMockExamDataAPI(subject)
     
     const resData = res.data
     console.log(res.data)
     if(res !== '')
      setExamData(resData)

    }
  return (
    <Layout>
      <Header style={{  textAlign: 'center' }}>
        <h1 style={{ color: 'white' ,fontSize: '1.5rem'}}>模拟考试数据统计分析</h1>
      </Header>
      <Content style={{ padding: '20px' }}>
        <Card>
          科目:
        <Select
              placeholder="请选择科目"
              defaultValue="请选择"
              onChange={onSelectSubject}
              style={{ width: 120 }}
            >
              {subjectList.map(item =><Option key={item.key} value={item.label} >{item.label}</Option>)}

            </Select>
        </Card>
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic title="总考生人数" value={examData.length} />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic title="平均分数" value={Math.round(examData.reduce((acc, cur) => acc + cur.mockExaminationScore, 0) / examData.length)} />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic title="通过率" value={`${Math.round((examData.filter(item => item.passed).length / examData.length) * 100)}%`} />
            </Card>
          </Col>
        </Row>
        <br />
        <Card title="考试数据表格">
          <Table dataSource={examData} columns={columns} />
        </Card>
      </Content>
    </Layout>
  );
};

export default MockExam;